<template>
    <div>
        <span>姓名:</span><el-input v-model="username" placeholder="请输入姓名"></el-input>  <el-button type="primary" @click="getUserInfo">查询</el-button>


        <el-table
    :data="tableData"
    style="width: 100%"
   >
    <!-- <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column> -->
    <el-table-column
      prop="username"
      label="姓名"
      width="180">
    </el-table-column>
        <el-table-column
      prop="age"
      label="年龄"
      width="180">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="电话"
     >
    </el-table-column>
    <el-table-column
      prop="mail"
      label="邮编"
     >
    </el-table-column>
  </el-table>
    </div>
</template>
<script>
import {getUserAll,getUserByName} from '../api/data.js'
export default {
    name:'page2',
       data() {
      return {
        tableData: [],
        username:""
      }
    },
    mounted(){
      getUserAll().then(res=>{
        console.log("getUserInfo",res)
        this.tableData=res.data
      })
    },
    methods:{
        getUser(){
          getUserAll().then(res=>{
            console.log("getUserInfo",res)
            this.tableData=res.data
          })
        },
      getUserInfo(){
          if(this.username==""){
              this.getUser()
          }else{
        getUserByName({username:this.username}).then(res=>{
            console.log("查询返回",res)
            this.tableData=[]
            this.tableData.push(res.data)
        })
          }
      }
    }
  }
</script>

<style>

</style>